<template>
	<view>
		<view class="u-flex user-box">
			<view class="u-m-r-20" @click="openUrl('./userInfo')">
				<image class="user-img" src="../../static/images/touxiang.png" mode=""></image>
			</view>
			<view class="u-flex-1">
				<view class="user-info flex-center">
					<text class="u-name">初彩蓓</text><text class="u-tag">消化科</text>
				</view>
				<view class="u-attr flex-center">
					<text>护士长</text><text class="line"></text><text>规培</text><text
						class="line"></text><text>823467</text>
				</view>
			</view>
			<view class="u-up-20">
				<text class="iconfont icon-dropout"></text>
			</view>
		</view>
		<view class="uc-main">
			<view class="uc-panel">
				<view class="uc-panel_hd">患者</view>
				<view class="u-card" @click="openUrl('./bedAdmin')">
					<view class="u-icon">
						<image src="../../static/images/ucenter/u1.png" mode=""></image>
					</view>
					<view class="flex_bd">床位管理</view>
					<view class="iconfont icon-right"></view>
				</view>
				<view class="u-card" @click="openUrl('./notice')">
					<view class="u-icon">
						<image src="../../static/images/ucenter/u2.png" mode=""></image>
					</view>
					<view class="flex_bd">信息通知</view>
					<view class="badge">5</view>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
			<view class="uc-panel">
				<view class="uc-panel_hd">患者</view>
				<view class="u-card" @click="openUrl('./record')">
					<view class="u-icon">
						<image src="../../static/images/ucenter/u3.png" mode=""></image>
					</view>
					<view class="flex_bd">操作记录</view>
					<view class="iconfont icon-right"></view>
				</view>
				<view class="u-card" @click="openUrl('./patients')">
					<view class="u-icon">
						<image src="../../static/images/ucenter/u4.png" mode=""></image>
					</view>
					<view class="flex_bd">出院患者</view>
					<view class="iconfont icon-right"></view>
				</view>
				<view class="u-card"  @click="openUrl('./apply')">
					<view class="u-icon">
						<image src="../../static/images/ucenter/u5.png" mode=""></image>
					</view>
					<view class="flex_bd">申请审核</view>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
			<view class="uc-panel">
				<view class="uc-panel_hd">护士</view>

				<view class="u-card" @click="openUrl('./examine')">
					<view class="u-icon">
						<image src="../../static/images/ucenter/u6.png" mode=""></image>
					</view>
					<view class="flex_bd">转科审核</view>
					<view class="iconfont icon-right"></view>
				</view>
				<view class="u-card"  @click="openUrl('./nurseAdmin')">
					<view  class=" u-icon">
					<image src="../../static/images/ucenter/u7.png" mode=""></image>
				</view>
				<view class="flex_bd">护士管理</view>
				<view class="iconfont icon-right"></view>
			</view>
		</view>
		<view class="uc-panel">
			<view class="uc-panel_hd">打印</view>
			<view class="u-card" @click="openUrl('/pages/ucenter/autoPrint')">
				<view class="u-lg-icon">
					<image src="../../static/images/ucenter/dayinji.png" mode=""></image>
				</view>
				<view class="flex_bd">
					<view class="tt">自主打印</view>
					<view class="desc">点击请编辑打印内容</view>
				</view>
				<view class="iconfont icon-right"></view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-card {
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 6px;
		margin-bottom: 10rpx;
		font-size: 30rpx;

		.tt {
			font-size: 32rpx;
			margin-bottom: 5px;
		}

		.desc {
			color: #999;
		}
	}

	.u-lg-icon {
		width: 150rpx;
		height: 150rpx;
		border-radius: 5px;
		background-color: #fafafa;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;

		image {
			width: 110rpx;
			height: 110rpx;
		}
	}

	.u-card .icon-right {
		color: #cccccc;
	}

	.u-card .u-icon {
		font-size: 0;
		line-height: 1;
		margin-right: 10px;
	}

	.u-card .u-icon image {
		width: 40rpx;
		height: 40rpx;
	}

	.u-card /deep/ .u-cell_title {
		font-size: 30rpx !important;
		color: #000000;
	}

	.badge {
		width: 36rpx;
		height: 36rpx;
		border-radius: 35px;
		background-color: #ff4343;
		border-radius: 40px;
		line-height: 36rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-right: 10px;
	}

	.uc-panel {
		margin-bottom: 30rpx;

		.uc-panel_hd {
			position: relative;
			padding-left: 20rpx;
			font-weight: bold;
			color: #0b54a4;
			line-height: 1.2;
			font-size: 32rpx;
			margin-bottom: 20rpx;

			&::after {
				width: 8rpx;
				height: 30rpx;
				content: '';
				background-color: #0b54a4;
				border-radius: 5px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.uc-main {
		padding: 30rpx;
	}

	.user-box {
		padding: 190rpx 30rpx 80rpx 30rpx;
		color: #FFFFFF;
		background-image: linear-gradient(to top right, #0b51a2, #009fe8);

		.user-img {
			border: 1px solid #5488c1;
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
		}

		.icon-dropout {
			font-size: 38rpx;
		}
	}

	.user-info {
		margin-bottom: 10rpx;

		text {
			display: inline-block;
		}

		.u-name {
			font-size: 34rpx;
			margin-right: 18rpx;
		}

		.u-tag {
			background-color: rgba(255, 255, 255, .14);
			height: 38rpx;
			line-height: 38rpx;
			padding: 0 16rpx;
			border-radius: 3px;
			font-size: 24rpx;
		}
	}

	.u-attr {
		text {
			display: inline-block;
			opacity: .6;
			font-size: 28rpx;
		}

		.line {
			margin: 0 10px;
			width: 1px;
			height: 10px;
			background-color: #f8f8f8;
		}
	}

	.u-up-20 {
		margin-top: -20px;
	}
</style>
